import React, {Component} from 'react';
import {
  SafeAreaView,
  FlatList,
  StyleSheet,
  View,
  Text,
  StatusBar,
  ScrollView,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import {ListItem, Input} from 'react-native-elements';

export default class ListEditItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {label, placeholder, onChangeText} = this.props;
    return (
      <ListItem bottomDivider>
        <ListItem.Content>
          <ListItem.Title>{label}</ListItem.Title>
          <View style={styles.subtitleView}>
            <TextInput
              placeholder={placeholder}
              onChangeText={onChangeText}
              containerStyle={styles.container}
              inputContainerStyle={styles.inputContainer}
              placeholderTextColor="#b2b2b2"
              {...this.props}
            />
          </View>
        </ListItem.Content>
      </ListItem>
      //   <ListItem
      //     title={
      //       <Input
      //         label={this.props.label || this.props.placeholder}
      //         placeholder={this.props.placeholder}
      //         placeholderTextColor={this.props.errorMessage ? '#FF9999' : '#cccccc'}
      //         onChangeText={this.props.onChangeText}
      //         containerStyle={styles.container}
      //         inputContainerStyle={styles.inputContainer}
      //         errorMessage={this.props.errorMessage}
      //         errorStyle={styles.errorMessage}
      //         {...this.props}
      //       />
      //     }
      //     bottomDivider
      //   />
    );
  }
}

const styles = StyleSheet.create({
  subtitleView: {
    paddingTop: 10,
    width: '100%',
  },
  inputContainer: {
    borderBottomWidth: 0,
  },
});
